<template>
	<view class="operationLinkMain">
		<!-- 操作列 -->
		<view class="operationLink">
<!-- 						<view v-for="(item,index) in operationLink" class="imageItem">
				<view class="imageItemA">
					<view>
						<image class="imageItemimage" :src="item.src"></image>
					</view>
					<view>{{item.title}}</view>
				</view>
			</view> -->
			
		</view>
		
		<view class="operationContent">
			<view class="recommendContent">
			
				<image class="forYouRecommendImage" src="@/static/operation/title@interest.png"></image>
				<view class="waterfall-flow">
					<view @click="toggle('popup')" class="item-flow" v-for="(item,index) in itemList">
						<image mode="widthFix" class="item-flow-image" :src="item.imageSrc"></image>
						<view class="item-title">{{item.title}}</view>
						<view class="item-content">{{item.content}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 分享示例 -->
		<!-- 	<uni-popup ref="share" type="bottom"  background-color="#fff" height="400px">
			<commodityDetails></commodityDetails>
		</uni-popup> -->
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" type="bottom" background-color="#fff">
				<view class="popup-content">
					<goodDetails></goodDetails>
					<!-- <text class="text">popup 内容222222222222222222222222222</text> -->
				</view>
			</uni-popup>
		</view>
	</view>
</template>
<script>
	import goodDetails from "@/pages/commodity/commodityDetails.vue"
	import slideshow from "@/pages/slideshow/slideshow.vue";
		import slideshowA from "@/pages/commodity/slideshowA.vue";
	// 引入本地json
	import fixedData from '@/pages/json/goods/goods.json'
	// 将json中数组给functext（根据自己json文件的层级结构来使用）
	// const functext = fixedData.items
	export default {
		/* 组件 */
		components: {
			goodDetails,
			slideshow,
			slideshowA
		},
		data() {
			return {
				operationLink: [{
						src: '/static/operation/jilu.png',
						title: '记录'
					},
					{
						src: '/static/operation/liwu.png',
						title: '礼物'
					},
					{
						src: '/static/operation/shandian.png',
						title: '闪电'
					},
					{
						src: '/static/operation/youxi.png',
						title: '游戏'
					},
					{
						src: '/static/operation/zhinan.png',
						title: '指南'
					}

				],
				itemList: [{
						imageSrc: "https://img0.baidu.com/it/u=1345303087,1528317222&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082",
						title: '我是标题1',
						content: '我是内容1',
					},
					{
						imageSrc: 'https://pic.imgdb.cn/item/650850d7204c2e34d3a984ca.jpg',
						title: '我是标题2',
						content: '我是内容2',
					},
					{
						imageSrc: 'https://pic.imgdb.cn/item/64eee7e1661c6c8e54a86a07.jpg',
						title: '我是标题3',
						content: '我是内容3',
					},
					{
						imageSrc: 'https://pic.imgdb.cn/item/65085109204c2e34d3a9933c.jpg',
						title: '我是标题4',
						content: '我是内容4',
					},
					{
						imageSrc: 'https://pic.imgdb.cn/item/65084fd3204c2e34d3a96817.jpg',
						title: '我是标题5',
						content: '我是内容5',
					},
				],

			}
		},
		/* 方法 */
		methods: {
			/* 打开弹出框 */
			toggle(ref) {
				console.log('ref', ref);
				this.$refs[ref].open();
			},
		},
		
	}
</script>

<style lang="less" scoped>
	.popup-content {
		// @include flex;
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 400px;
		width: calc(100% - 2px);
		background-color: #fff;
	}

	.left-flow,
	.right-flow {
		margin: 0 auto;
		width: 48%;
	}

	.waterfall-flow-image {
		width: 100%;
		height: auto;
		margin-bottom: 10px;
	}

	.operationLinkMain {
		margin-top: 20px;

	}

	.operationLink {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		padding: 10px 30px 10px 30px;
	}

	.operationContent {
		margin-top: 20px;

	}

	/* 推荐内容样式 */
	.recommendContent {
		display: flex;
		/* margin-top: 20rem; */
		flex-direction: column;
		align-items: center;
		/* justify-content: center; */
	}

	/* 为你推荐图片*/

	.forYouRecommendImage {
		height: 70rpx;
		width: 690rpx;
		margin-bottom: 38rpx;
	}

	/* 瀑布流盒子 */
	.waterfall-flow {
		width: 100%;
		column-count: 2;
		padding: 0 1%;
		/* 设置总高度和宽度不会由内边距边框影响 默认是content-box */
		box-sizing: border-box;

		/* 瀑布流盒子 */
		.item-flow {
			display: flex;
			/*  */
			break-inside: avoid;
			justify-content: space-between;
			flex-direction: column;
			justify-content: center;

			.item-title {
				display: flex;
			}

			.item-content {
				display: flex;
			}
		}

		.item-flow-image {
			width: 100%;
			border-radius: 6rpx;
		}
	}

	.imageItemA {
		width: 40px;
		margin: 10px;
	}

	.imageItem {

		display: flex;
		flex-direction: column;
		align-items: center;
		flex-basis: 33.33%;
	}

	.imageItemimage {
		border-width: 0px;
		width: 30px;
		height: 30px;
	}
</style>